<template>
  <div class="user">
    <UserSearch
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <UserContent
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    />
    <UserModal ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import UserSearch from './subcomponent/user-search.vue'
import UserContent from './subcomponent/user-content.vue'
import UserModal from './subcomponent/user-modal.vue'
import { ref } from 'vue'

const contentRef = ref<InstanceType<typeof UserContent>>()
function handleQueryClick(data: any) {
  contentRef.value?.fetchUserPageData(data)
}
// 重置
function handleResetClick() {
  contentRef.value?.fetchUserPageData()
}
// 新建用户 modal组件操作
const modalRef = ref<InstanceType<typeof UserModal>>()
function handleNewClick() {
  modalRef.value?.setModalVisible()
}
// 编辑
function handleEditClick(data: any) {
  modalRef.value?.setModalVisible(false, data)
}
</script>

<style scoped>
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
